<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GIS综合展示平台</title>
<block th:replace="commonBase"></block>
<link rel="stylesheet" type="text/css" th:href="@{/common/js/arcgis/3.22/dijit/themes/claro/claro.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/common/js/arcgis/3.22/esri/css/esri.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/common/js/arcgis/images/css/arcmap.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/common/css/pagination.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/common/css/index.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/common/cmap_js/cmap.css}"/>
<script th:src="@{/bootstrap/js/jquery.twbsPagination.js}" type="text/javascript"></script>
<script th:src="@{/common/js/jquery.serializejson.min.js}" type="text/javascript"></script>
<!-- 大的条件赋值js -->
<script th:src="@{/gist/gist_index1.js}" type="text/javascript"></script>
<script th:src="@{/gist/gist.js}" type="text/javascript"></script>
<script th:src="@{/gist/gist_detail.js}" type="text/javascript"></script>

<!-- Echarts.js -->  
<script th:src="@{/common/js/echarts.js}"></script>
<script th:src="@{/common/js/macarons.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
<script th:src="@{/plugins/layui/layui.js}"></script>

<!-- 展示平台页面样式css文件 -->
<link rel="stylesheet" type="text/css" th:href="@{/gist/css/gist.css}"/>

<script th:inline="javascript" type="text/javascript">
	/*<![CDATA[*/
	/**
	 * 声明arcgis js工具文件的位置
	 **/
	dojoConfig = {
		baseUrl : "common/js/arcgis/3.22/dojo",
		isDebug : true,
		parseOnLoad : true,
		async : true,
		packages : [ {
			name : "extend",
			location : "../extend/"
		} ]
	};
	/*]]>*/
</script>
<script th:src="@{/common/js/arcgis/3.22/init.js}" type="text/javascript"></script>

<script type="text/javascript" th:src="@{/common/cmap_js/map_.js}"></script>
<script type="text/javascript" th:src="@{/common/cmap_js/map_doc.js}"></script>
<script type="text/javascript" th:src="@{/common/cmap_js/map.js}"></script>
<script type="text/javascript" th:src="@{/common/cmap_js/map_m.js}"></script>
<script type="text/javascript" th:src="@{/common/cmap_js/demo.js}"></script>



<script th:inline="javascript" type="text/javascript">
 /*<![CDATA[*/
	 		
	 		  var extMap=null;
	 		//  var layer2=null;
	 		//  var layer3=null;
			  require(["dojo/ready","extend/ExtArcMap","dijit/registry","dijit/Tooltip","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ArcGISTiledMapServiceLayer"], function(ready,ExtArcMap,registry,Tooltip,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer) {  
					ready(function() { 
						//extMap = new  ExtArcMap();
					//	extMap.e_overview = false;//去除鹰眼图
					//	extMap.e_navigation = true;
 						  var token="";
 							$.ajax({  
 					            type: "post",  
 					            dataType: "text",  
 					            url: basePath+"gist/getToken",  
 					            data:null, 
 					            async:false,
 					            success: function (data) {  
 					            	token=data;	
// 					            	//extMap.e_url ="http://42.236.7.25:6080/arcgis/rest/services/BaseMaps/World2ChinaMapBG/MapServer?token="+token,
// 					            //	extMap.initMap(); //初始化底图
// 					            	//增加图层
// 					            	//layer1=new ArcGISTiledMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services/BaseMaps/World2ChinaMapLabel/MapServer?token="+token);
// // 					            	layer2=new ArcGISTiledMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services/BaseMaps/ChinaRoads/MapServer?token="+token);
// // 					            	layer3=new ArcGISTiledMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services//BaseMaps/DarkBlueMap/MapServer?token="+token);
// 									//layer4=new ArcGISDynamicMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services/ThematicMap/RoadNetThematicMap/MapServer?token="+token,{id:"RoadNetThematicMap",visible:true});
// 					            	//layer5=new ArcGISDynamicMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services/ThematicMap/BridgeThematicMap/MapServer?token="+token,{id:"BridgeThematicMap",visible:false});
// 					            	//layer6=new ArcGISDynamicMapServiceLayer("http://42.236.7.25:6080/arcgis/rest/services/ThematicMap/TunnelThematicMap/MapServer?token="+token,{id:"TunnelThematicMap",visible:false});
					            	
// // 					            	extMap.addExtLayer(layer2);
// // 					            	extMap.addExtLayer(layer3);
// 					            //	extMap.addExtLayer(layer6);
// 					            //	extMap.addExtLayer(layer5);
// 					            //	extMap.addExtLayer(layer4);
// 					            //	extMap.addExtLayer(layer1);
 									cmap_token = token;
 									inienvt(url19);			            					            
 					            },  
 					            error: function () {  
 					                alert("获取token失败"); 
 					            }  
 					        }); 
					})
			  });
			
			var currentyear = new Date().getFullYear();//获取当前年份
		    var yearArray = new Array();
		    function setYearCombox(){
				  var year=currentyear+1; 
				  for(var i= 0;i<10;i++){
					  year =  year - 1;
					  var yearObj = new Object();
					  yearObj.id=year;
					  yearObj.text= year;
					  yearArray.push(yearObj);
				  }
			} 
			$(function(){
				setYearCombox();
				//搜索框查询按钮和清除按钮提示信息
				var tip = new mini.ToolTip();
						tip.set({
						    target: document,
						    selector: '[data-tooltip], [title]'
				});
				
				//搜索框点击显示公路，桥梁，隧道以及大的条件
				$("#sole-input").click(function() {
					$("#sole-input").val("");
					$("#cards-level1").css("display", "block");
					$("#cards-level2").css("display", "none");
				});

			
    			//清空卡片
      	 		$("#sole-clear").click(function(){
      	 			$("#cards-level1").css("display","none");
      	 			$("#cards-level2").css("display", "none");
      	 			$("#sole-input").val("");
					//进入可视化页面
      	 			intoKSH();
      	 			
      	 		});
				
			});


		
			
		  //定义变量,点击选择赋值js在gistindex1.js中
		  var repyear = "2016";//默认年份查询2016
		  var districtname = "全国";//默认政区查询全国
		  var roadtype = "全部";//默认查路线类别询全部
		  var roadTypeText = "";//对应的数据字典定义的路线类别
		  
		  var searchKeyValue = null;
		  
		  var path = null;//定义iframe路径
		  function getDetail(type){
		  if(roadtype == "全部"){
			  roadTypeText = "";
		  }else{
			  roadTypeData = getDict('gllb');
			  $.each(roadTypeData,function(index,value){
				  if(this.text == roadtype){
					  roadTypeText = this.id;
				  }
			  })
		  }
		  $("#cards-level1").css("display", "none");
		  searchKeyValue=districtname + repyear + "年" + roadtype;
		  if(type == "road"){
			  $("#cards-level2").css("display", "block");
			  path = /*[[@{/gist/roadIndex}]]*/;
			  $("#road").attr("src", path);//加载公路页面
		  }else if(type == "bridge"){
			  path = /*[[@{/gist/bridgeIndex}]]*/;
			  $("#bridge").attr("src", path);//加载桥梁页面
		  }else{
			  path = /*[[@{/gist/tunnelIndex}]]*/;
			  $("#tunnel").attr("src", path);//加载隧道页面
		  }
		  
				
		}

			function intoKSH(){
				$("#cards-level1").hide();
				$("#cards-level2").hide();
				$("#cards-level3").hide();
				$("#cards-level4").hide();
				$("#searchbox").hide();


				$("#ksh").show();
				var topHeight = $(window).height() - 500;
/* 				$("#arcgisDiv").css({"width":"480px","height":"250px","position":"absolute","top":topHeight+"px"});
 */

				mini.parse();
 			
 				$("#arcgisDiv").css({"width":"400px","height":"250px"});
				$("#arcgisDiv").animate({ 
					opacity:1.0, 
					width:"400px", 
					height: "250px", 
					top: topHeight+"px", 
					left: "0px",
					zIndex:2
					},600);  

				$("#ksh").css("zIndex",1);
				$("#ex1").css({"width":"100%","height":topHeight+280+"px","top":"0px","left":"0px","zIndex":1});


				  showgzt();

			}

			function gotoKSH(){
				$("#searchbox").show();
				$("#ksh").hide();

				$("#arcgisDiv").css({"width":"100%","height":"100%"});
				$("#arcgisDiv").animate({ 
					opacity:1.0, 
					width:"100%", 
					height: "100%", 
					top: "0px", 
					left: "0px" 
					},600); 

				
			}



			var ischange = false;
			/**
			*交换
			**/
			function exchange(){

				var topHeight = $(window).height() - 220;

				if(ischange){
					$("#arcgisDiv").css({"width":"400px","height":"250px","position":"absolute","top":topHeight-280+"px","zIndex":2});
					$("#ksh").css("zIndex",1);
					$("#ex1").css({"width":"100%","height":topHeight+"px","top":"0px","left":"0px","zIndex":1});

					ischange = false;
				}else{
					$("#ex1").css({"width":"400px","height":"250px","position":"absolute","top":topHeight-280+"px","zIndex":2});
					$("#ksh").css("zIndex",2);
					$("#arcgisDiv").css({"width":"100%","height":topHeight+"px","top":"0px","left":"0px","zIndex":1});

					ischange = true;
				}
				
			}

			function showqftx(){
				$("#qftx").toggle();
			}


			layui.use('flow', function(){
				  var flow = layui.flow;
				 
				  flow.load({
					    elem: '#LAY_demo1' //流加载容器
					    ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
					    ,done: function(page, next){ //执行下一页的回调
						      //模拟数据插入
						      setTimeout(function(){
						        var lis = [];
						        for(var i = 1; i < 5; i++){
						        	lis.push('<li ><img width="405px;" src="'+basePath+'dist/img/photo'+i+'.jpg?v='+ ( (page-1)*6 + i + 1 ) +'" /></li>')
						          //lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
						        }
						        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
						        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
						        next(lis.join(''), page < 10); //假设总页数为 10
						      }, 500);
					    }
					});

			});


			
		

	/*]]>*/
</script>
</head>
<body class="claro">


			
			
			<div  id="qftx" style="width:410px;height: calc(100vh - 250px);left:0px;top:0px;display:none;position: absolute;z-index: 314;">
				<ul class="flow-default" id="LAY_demo1" style="height: 100%;width: 100%;overflow-y:scroll;z-index: 314;overflow-x:hidden;"></ul>
				<div style="height: 28px;width: 28px;top: 0px; left: 376px;background-color: #8D8C8A;position: absolute;cursor:pointer;z-index: 3;" >
			 		<i class="fa fa-close" style="font-size: 18px;color: #fff;margin-top: 5px;margin-left: 6px;" title="关闭"  onclick="showqftx()"></i>
			 	</div>
				
		    </div>
			
			
	        <div  id="arcgisDiv" style="width:100%;height:100%;display:block;position: absolute;z-index: 2">
		    </div>
			
			 <div id="ksh" style="width:100%;height:100%;z-index: 1;display: none;">
			 	<div style="height: 54px;width: 28px;top: calc(100vh - 500px); left: 372px;background-color: #8D8C8A;position: absolute;cursor:pointer;z-index: 3;" >
			 		<i class="fa fa-exchange" style="font-size: 16px;color: #fff;margin-top: 5px;margin-left: 5px;" title="交换"  onclick="exchange()"></i>
			 		<i class="fa fa-camera" style="font-size: 16px;color: #fff;margin-top: 8px;margin-left: 5px;" title="路面原图" onclick="showqftx()"></i>
			 	</div>
			 
			 	<div class="mini-fit" style="text-align: center;background: #f0f1f5;"  >
			 		 <div   style="width: 100%;height: 100%;">
			 		 	<img id="ex1" th:src="@{/dist/img/photo3.jpg}" style="height: 100%;width: 100%;position: absolute;left: 0px;top: 0px;"  />
			 		 </div>
			 		 <div style="width: 100%;background-color: black;opacity: 0.7;height: 29px;position: absolute;bottom: 0px;left: 0px;color: white;font-family: 微软雅黑;font-size: 16px;z-index: 3;">
			 		 	<div class="mini-col-4" style="margin-top: 4px;cursor: pointer;" onclick="gotoKSH()">
							<i class="fa fa-reply-all" aria-hidden="true" ></i>&nbsp;返回地图
			            </div>
			            <div class="mini-col-4" style="margin-top: 3px;">
			                G1 京哈高速 K1+000 ~ K11+830 | 上行 下行 当前桩号 K1+987 
			            </div>
			            <div class="mini-col-4" style="margin-top: 4px;">
							方格 曲线
			            </div>
			 		 </div>
			 	</div>
			 	<div style="width: 100%;height: 220px;">
					<div style="width: 100%; height:220px;" id="xfbMap">
					</div>
			 	</div>
			 </div>
			 
			 
			 <div id="searchbox"  >
		    	 	<div id="searchbox-container" style="border:1px #e5e5e5 solid;">
			    		<div id="sole-searchbox-content" class="searchbox-content" style="height:100%;">
			    				<div style="height:33px;">
				    			    <input id="sole-input" class="searchbox-content-common" type="text" name="word" autocomplete="off" maxlength="256"  style="font-size:14px;font-family:Arial,Helvetica,SimSun,sans-serif;"  placeholder="搜桥隧、查路况、找路线" value=""></input>
				    			    <div id="sole-clear" class="searchbox-content-button right-button route-button"  data-tooltip="清空" ></div>
			    				</div>
					    </div>
		    		</div>
		    </div>
			 
			<!-- 选择大的查询条件以及公路，桥梁，隧道开始 --> 
			<div id="cards-level1"  style="width:368px;height:70px;display:none;position:absolute;top:75px;left:50px;border:1px solid #e5e5e5;background-color: white;z-index: 3">
			        <div id="commonCondition" style="margin-bottom:10px;">
			        	<div class="conditionClass">
					    		<span onclick="selectDistrict()" style="padding-left:90px;padding-top:10px;cursor:pointer;" id="districtChoice">全国</span>
						        <span style="padding-right:15px;padding-left:3px;padding-top:10px;cursor:pointer;" onclick="selectDistrict()" id="dirIcon" class="fa fa-angle-double-up"></span> 
						        
						        <span onclick="selectYear()" style="padding-left:5px;padding-top:10px;cursor:pointer;" id="yearChoice">2016年</span>
						        <span style="padding-right:15px;padding-left:3px;padding-top:10px;cursor:pointer;" onclick="selectYear()" id="yearIcon" class="fa fa-angle-double-up"></span>
						       
						        <span onclick="selectRoadType()" style="padding-left:5px;padding-top:10px;cursor:pointer;" id="roadTypeChoice">全部</span>
						        <span style="padding-right:15px;padding-left:3px;padding-top:10px;cursor:pointer;" onclick="selectRoadType()" id="roadTypeIcon" class="fa fa-angle-double-up"></span>
						        
					    </div>
			        </div>
			        <div class="hline"></div>
			        
			        <div class="firstdivclass" style="margin-left:40px;">
			        	<span onclick="getDetail('road')" class="typeClass" style="padding-left:10px;font-size:20px;"><span class="fa fa-road"></span>
							<font style="padding-left:10px;padding-right:10px;">公路</font>
						</span>
			        	<span onclick="getDetail('bridge')" class="typeClass" style="padding-left:10px;font-size:20px;"><span class="fa fa-road"></span>
							<font style="padding-left:10px;padding-right:10px;">桥梁</font>
						</span>
			        	<span onclick="getDetail('tunnel')" class="typeClass" style="padding-left:10px;font-size:20px;"><span class="fa fa-road"></span>
							<font style="padding-left:10px;padding-right:10px;">隧道</font>
						</span>
			        </div>
			</div>
			<!-- 选择大的查询条件以及公路，桥梁，隧道结束 -->  
			
			<!-- 选择省份开始 -->
			<div id="districtTree" style="position:absolute;display:none;z-index:88;top:112px;left:50px;width:368px;border:1px solid #e5e5e5;border-top:0;height:230px;background-color: white;z-index: 3">
					<div style="border-bottom: 1px solid #dadada;height: 25px;line-height:25px;font-size: 12px; color: #4c4c4c;padding-left: 7px;">政区列表</div>
								<div class="mini-fit">
									<div  style="width:100%;height:20px;">
				        	<table style="width: 100%;" border="0">
				        		<tr align="left" style="height: 20px;">
				        			<td rowspan="3"><span class="firstDistrict" onclick="getDistrict('全国')">全国</span></td>
				        		</tr>
				        	</table> 
				        </div>
				        <div  style="width:100%;height:184px;">
				        	<table id="eastTable" style="width: 100%;padding-top:10px;" border="0">
				        	</table>
				        	<table id="middleTable" style="width: 100%;padding-top:10px;" border="0">
				        	</table>
				        	<table id="westTable" style="width: 100%;padding-top:10px;" border="0">
				        	</table>
				        </div>
			        </div>
				</div>	 	
		 <!-- 选择省份结束 -->
	 	 <!-- 选择年份开始 -->
		 <div id="year" style="position:absolute;display:none;z-index:88;top:112px;left:50px;width:368px;border:1px solid #e5e5e5;border-top:0;height:90px;background-color: white;z-index: 3">
				<div style="border-bottom: 1px solid #dadada;height: 25px;line-height:25px;font-size: 12px; color: #4c4c4c;padding-left: 7px;">年份列表</div>
				  <div class="mini-fit">
			        <div  style="width:100%;height:100%;">
			        	<table id="yearTable" style="width: 100%;padding-top:10px;" border="0">
			        	</table>
			        </div>
		        </div>
			</div>	 	
		<!-- 选择年份结束 -->
	 	 <!-- 选择路线类别开始 -->
		 <div id="roadType" style="position:absolute;display:none;z-index:88;top:112px;left:50px;width:368px;border:1px solid #e5e5e5;border-top:0;height:70px;background-color: white;z-index: 3">
				<div style="border-bottom: 1px solid #dadada;height: 25px;line-height:25px;font-size: 12px; color: #4c4c4c;padding-left: 7px;">路线类别列表</div>
				  <div class="mini-fit">
			        <div  style="width:100%;height:100%;">
			        	<table id="roadTypeTable" style="width: 100%;padding-top:10px;" border="0">
			        	</table>
			        </div>
		        </div>
			</div>	 	
		<!-- 选择路线类别结束 --> 
		
		<!-- 公路模块 -->
		<div id="cards-level2"  style="width:369px;height:446px;display:none;z-index:300;border:1px solid #aed0ea;border-top:0px;position: absolute; top: 31px; left: 50px;z-index: 3">
			 <iframe id="road" align="center" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" />    				    
		</div>
		
		<!-- 桥梁模块 -->
		<div id="cards-level3"  style="width:368px;height:446px;display:none;z-index:300;border:1px solid #aed0ea;border-top:0px;z-index: 3">
			 <iframe id="bridge" align="center" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" />     				    
		</div>
		
		<!-- 隧道模块 -->
		<div id="cards-level4"  style="width:368px;height:446px;display:none;z-index:300;border:1px solid #aed0ea;border-top:0px;z-index: 3">
			 <iframe id="tunnel" align="center" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" />	    				    
		</div>
		<script type="text/javascript">


					
					//格子图
					function showgzt(){
						var xqfbChart = echarts.init(document.getElementById('xfbMap'), 'macarons');
						var hours = [ '1148', '1149.312', '1150', '1151', '1152', '1153', '1154', '1155', '1156', '1157', '1158', '1159',
							'1160', '1161', '1162', '1163', '1164', '1165', '1166', '1167', '1168', '1169', '1170',
							'1171' ];
						var days = ['PSSI','SRI','RDI','RQI','PCI','方案' ];
						var data = [ [ 0, 0, 98 ], [ 0, 1, 100 ], [ 0, 2, 98 ], [ 0, 3, 90 ],
				 			[ 0, 4, 98 ], [ 0, 5, 98 ], [ 0, 6, 90 ], [ 0, 7, 98 ],
				 			[ 0, 8, 98 ], [ 0, 9, 96 ], [ 0, 10, 97 ], [ 0, 11, 95 ],
				 			[ 0, 12, 94 ], [ 0, 13, 100 ], [ 0, 14, 98 ], [ 0, 15, 98 ],
				 			[ 0, 16, 98 ], [ 0, 17, 98 ], [ 0, 18, 98 ], [ 0, 19, 98 ],
				 			[ 0, 20, 98 ], [ 0, 21, 83 ], [ 0, 22, 98 ], [ 0, 23, 98 ],
				 			[ 1, 0, 98 ], [ 1, 1, 98 ], [ 1, 2, 98 ], [ 1, 3, 98 ],
				 			[ 1, 4, 98 ], [ 1, 5, 98 ], [ 1, 6, 98 ], [ 1, 7, 98 ],
				 			[ 1, 8, 98 ], [ 1, 9, 98 ], [ 1, 10, 98 ], [ 1, 11, 98 ],
				 			[ 1, 12, 98 ], [ 1, 13, 98 ], [ 1, 14, 98 ], [ 1, 15, 98 ],
				 			[ 1, 16, 98 ], [ 1, 17, 98 ], [ 1, 18, 85 ], [ 1, 19, 98 ],
				 			[ 1, 20, 98 ], [ 1, 21, 98 ], [ 1, 22, 98 ], [ 1, 23, 98 ],
				 			[ 2, 0, 98 ], [ 2, 1, 98 ], [ 2, 2, 98 ], [ 2, 3, 98 ],
				 			[ 2, 4, 90 ], [ 2, 5, 98 ], [ 2, 6, 98 ], [ 2, 7, 98 ],
				 			[ 2, 8, 98 ], [ 2, 9, 40 ], [ 2, 10, 93 ], [ 2, 11, 98 ],
				 			[ 2, 12, 98 ], [ 2, 13, 99 ], [ 2, 14, 98 ], [ 2, 15, 98 ],
				 			[ 2, 16, 98 ], [ 2, 17, 95 ], [ 2, 18, 98 ], [ 2, 19, 98 ],
				 			[ 2, 20, 97 ], [ 2, 21, 44 ], [ 2, 22, 98 ], [ 2, 23, 64 ],
				 			[ 3, 0, 98 ], [ 3, 1, 98 ], [ 3, 2, 98 ], [ 3, 3, 98 ],
				 			[ 3, 4, 98 ], [ 3, 5, 98 ], [ 3, 6, 98 ], [ 3, 7, 98 ],
				 			[ 3, 8, 91 ], [ 3, 9, 98 ], [ 3, 10, 98 ], [ 3, 11, 94 ],
				 			[ 3, 12, 98 ], [ 3, 13, 98 ], [ 3, 14, 98 ], [ 3, 15, 98 ],
				 			[ 3, 16, 99 ], [ 3, 17, 98 ], [ 3, 18, 95 ], [ 3, 19, 98 ],
				 			[ 3, 20, 98 ], [ 3, 21, 98 ], [ 3, 22, 98 ], [ 3, 23, 98 ],
				 			[ 4, 0, 98 ], [ 4, 1, 98 ], [ 4, 2, 98 ], [ 4, 3, 98 ],
				 			[ 4, 4, 98 ], [ 4, 5, 91 ], [ 4, 6, 98 ], [ 4, 7, 98 ],
				 			[ 4, 8, 90 ], [ 4, 9, 98 ], [ 4, 10, 94 ], [ 4, 11, 98 ],
				 			[ 4, 12, 98 ], [ 4, 13, 98 ], [ 4, 14, 98 ], [ 4, 15, 98 ],
				 			[ 4, 16, 98 ], [ 4, 17, 91 ], [ 4, 18, 98 ], [ 4, 19, 98 ],
				 			[ 4, 20, 98 ], [ 4, 21, 97 ], [ 4, 22, 98 ], [ 4, 23, 96 ],
				 			[ 5, 0, 98 ], [ 5, 1, 98 ], [ 5, 2, 98 ], [ 5, 3, 62 ],
				 			[ 5, 4, 98 ], [ 5, 5, 98 ], [ 5, 6, 98 ], [ 5, 7, 98 ],
				 			[ 5, 8, 98 ], [ 5, 9, 98 ], [ 5, 10, 94 ], [ 5, 11, 98 ],
				 			[ 5, 12, 98 ], [ 5, 13, 98 ], [ 5, 14, 98 ], [ 5, 15, 98 ],
				 			[ 5, 16, 98 ], [ 5, 17, 96 ], [ 5, 18, 98 ], [ 5, 19, 98 ],
				 			[ 5, 20, 98 ], [ 5, 21, 98 ], [ 5, 22, 98 ], [ 5, 23, 98 ]
				 			];
						option = {
						 		tooltip : {
						 			trigger : 'item',
						 			axisPointer : {
						 				type : 'line',
						 				axis : 'x',
						 				crossStyle : {
						 					color : "#ccc",
						 					type : 'dashed',
						 					shadowColor : '#000'
						 				}
						 			},
						 			position : 'top'
						 		},
						 		animation : true,
						 		grid : {
						 			left : '35',    
						 			right : '10',
						 			bottom : '25',    
						 			top : '10'        
						 		},
						 		xAxis : {
						 			type : 'category',
						 			data : hours,
						 			splitArea : {
						 				show : true
						 			}
						 		},
						 		yAxis : {
						 			type : 'category',
						 			data : days,
						 			splitArea : {
						 				show : true
						 			}
						 		},
						 		visualMap : {
						 			show : false,
						 			min : 0,
						 			borderColor : '#fff',
						 			borderWidth : '1',
						 			max : 100,
						 			pieces : [ {
						 				min : 90,
						 				label : '优',
						 				color : '#00B400'
						 			}, // 不指定 max，表示 max 为无限大（Infinity）。
						 			{
						 				min : 80,
						 				max : 90,
						 				label : '良',
						 				color : '#00E6AA'
						 			}, {
						 				min : 70,
						 				max : 80,
						 				label : '中',
						 				color : '#FFFF00'
						 			}, {
						 				min : 60,
						 				max : 70,
						 				label : '次',
						 				color : '#FF9900'
						 			}, {
						 				min : 0,
						 				max : 60,
						 				label : '差',
						 				color : '#FF3232'
						 			} ],
						 			calculable : false,
						 			color : [ '#d94e5d', '#eac736', '#50a3ba' ]
						
						 		},
						 		series : [ {
						 			type : 'heatmap',
						 			data : data,
						 			label : {
						 				normal : {
						 					show : false
						 				}
						 			},
						 			itemStyle : {
						 				emphasis : {
						 					shadowBlur : 100,
						 					shadowColor : 'rgba(0, 0, 0, 0.5)'
						 				}
						 			}
						 		} ]
						 	};
						xqfbChart.setOption(option);
					}
		</script>
</body>
</html>